import Header from "./components/Header";
import Footer from "./components/Footer";
import Note from "./components/Note";
import CreateArea from "./components/CreateArea";

import {useState} from "react";



function App() {
    const [notes,setNotes] = useState([]);
    function addNote(newNote){
        setNotes(prevNotes =>{
            return [...prevNotes,newNote];
        })
    }
  return (
    <div>
        <Header />
        <CreateArea onAdd={addNote}/>
        { notes.map(item => (
            <Note
            key = { item.key }
            title = { item.title }
            content = { item.content }/>
        )) }

        <Footer />
    </div>
  );
}

export default App;
